<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #in{
            width: 400px;
            padding: 20px;
            font-size: 30px;
            
        }
        input[id="in"]:focus{
            background-color: rgba(0,0,0,0.9);
            color: white;
            border: solid 5px;
            outline: dashed blue 5px;
        }
        form{
            /* form默认的display属性是block */
            width:500px;
            margin: auto;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;margin-right: 60px;">鼠标焦点效果</h1>
    <form action="">
        <input type="text" name="" id="in">
    </form>
    <script>
        var input = document.getElementById("in")
        color_list = ["red","pink","orange","blue","aqua","black","yellow","purple","brown"]
        setInterval(()=>{color()},200)
        function color(){
            var left = Math.floor(Math.random() * 10)
            input.style.borderLeftColor = color_list[left]
            var right = Math.floor(Math.random() * 10)
            input.style.borderRightColor = color_list[right]
            var top = Math.floor(Math.random() * 10)
            input.style.borderTopColor = color_list[top]
            var bottom = Math.floor(Math.random() * 10)
            input.style.borderBottomColor = color_list[bottom]
        }
           
        

    </script>
</body>
</html>